<template>
	<view class="content" :style="{'background-color':pageBg}"  style="float: left;width: 100%;min-height: 100%;">
		
		<okingtz-cropper @uploadSuccess="uploadSuccess" :imageSrc="imageSrc" :original="false"></okingtz-cropper>
	</view>
</template>

<script>
	import OkingtzCropper from '@/components/okingtz-cropper/okingtz-cropper'
	var _self
	export default {
		components:{
			OkingtzCropper
		},
		data() {
			return {
				imageSrc:'',
				avatar:'',
				user:''
			}
		},
		onLoad(options) {
			_self = this
			this.imageSrc = options.imageSrc
			
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		methods: {
			// 3.定义自己的回调函数
			uploadSuccess(tempFilePath){
				uni.showToast({
					title:'保存成功'
				})
				// 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
				console.log('tempFilePath_->',tempFilePath)
				
				this.postImg(tempFilePath)
				// 5、保存到相册
				// uni.saveImageToPhotosAlbum({
				// 	filePath:tempFilePath,
				// 	success:function(){
				// 		console.log('保存成功');
				// 	}
				// })
			},
			// 上传图片
			postImg(imgFilePaths) {
				uni.uploadFile({
					url: getApp().globalData.url + '/common/upload',
					filePath: imgFilePaths,
					name: 'file',
					success: (uploadFileRes) => {
						
						let imgValue = JSON.parse(uploadFileRes.data)
						_self.avatar = imgValue.fileName
						_self.saveData()
						
					}
				});
			},
			
			saveData() {
			
				var data = {
					id: _self.user.id,
					avatar: _self.avatar,
				}
				this.$api.updateUser(data).then((res) => {
					var resData = res;
					console.log(resData)
					if (resData.code == "200") {
						uni.navigateBack({
							delta:1
						})
								
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}
	
	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}
	
</style>
